<template>
	<el-dialog :title="title" v-model="model" width="500" :before-close="cancel">

		<el-form :model="dataForm" :rules="rules" ref="rulesFormRef" label-width="110">
			<el-form-item label="姓名" prop="name">
				<el-input v-model="dataForm.name" placeholder="请输入姓名"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button type="primary" @click="chargingUpdate">确认</el-button>
			<el-button type="danger" @click="cancel">取消</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import type { FormInstance, FormRules } from 'element-plus'
	import type { Student } from '../common/data/student'
import { ca } from 'element-plus/es/locales.mjs';

	//自定义左键v-model
	const model = defineModel();
	//自定义事件
	const emit = defineEmits(['refresh']);
	//表单实例
	const ruleFormRef = ref<FormInstance>();
	const title = ('');
	const dataForm = ref<Student>({
		id: ''
	})

	const rules = ref<FormRules<Student>>({
		name: [{
			required: true,
			message: '请输入姓名',
			trigger: 'blur'
		}]
	})
	const init = () => {
		console.log(11);
				console.log(dataForm.value.id);
		
				//重置表单
				ruleFormRef.value?.resetFields();
		
				getById()
	}
	const getById = () =>{
		//发送请求
		
	}
	//提交数据
	const chargingUpdate = () => {
		ruleFormRef.value?.validate(async (valid)=>{
			console.log(valid);
			if(!valid){
				console.log("错误")
				return
			}
			//发送请求保存数据
			
			//刷新表格数据事件
			emit("refresh");
			
			//关闭弹窗
			cancel();
		})
	}
	//取消
	const cancel = () => {
		model.value = false;
	}
	// 暴露出去的属性
	defineExpose({
		title,
		dataForm,
		init,
		model
	})
</script>

<style>
</style>